<template>
  <div class="page-shop">
    <!-- 店铺信息 -->
    <div class="shopInfo">
      <h2>{{shopData.name}}</h2>
      <div class="mt10">
        <van-rate class="mr10" v-model="shopData.score" :size="25"
          color="#f2d45d" void-icon="star" void-color="#eee" allow-half />
        <span class="count">({{ shopData.sellCount }})</span>
        <span>月售{{ shopData.sellCount }}单</span>
      </div>
      <div>
        <!-- <van-icon name="like-o" size="25" @click="changeColor"
          color="flag?'#f64d19':''" />
        {{text="flag?'已收藏':'收藏'"}} -->
      </div>
    </div>
    <van-divider />
    <div class="middleInfo df aic jcsb">
      <!-- 起送价 -->
      <div class="minPrice price">
        <div>起送价</div>
        <div><span class="num">{{shopData.minPrice}}</span> 元</div>
      </div>
      <!-- 商家配送 -->
      <div class="deliveryPrice price">
        <div>商家配送</div>
        <div><span class="num">{{shopData.deliveryPrice}}</span> 元</div>
      </div>
      <!-- 平均配送时间 -->
      <div class="deliveryTime price">
        <div>平均配送时间</div>
        <div><span class="num">{{shopData.deliveryTime}}</span> 分钟</div>
      </div>
    </div>
    <van-divider class="mt20" />
    <div class="bulletin-content mt20">
      <h1>活动与公告</h1>
      <div class="bulletin mt20">
        {{shopData.bulletin}}
      </div>
    </div>
    <div class="supports-content">
      <van-notice-bar class="supports" color="#000" background="#fff"
        v-for="item in shopData.supports" :key="item">{{item}}
      </van-notice-bar>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      flag: false,
    };
  },
  computed: {
    ...mapState("shop", ["shopData"]),
  },
  methods: {
    changeColor() {
      let flag = !flag;
      console.log("this.flag :>> ", this.flag);
    },
    ...mapActions("shop", ["A_getShopInfo"]),
  },
  created() {
    //初始化发请求
    this.A_getShopInfo();
  },
};
</script>

<style lang="scss" scoped>
.page-shop {
  background: #f4f5f7;
}
.shopInfo {
  padding: 20px;
  background: #fff;
}
.middleInfo {
  width: 100%;
  padding: 20px;
  font-size: 20px;
  color: #dfdfdf;
  background: #fff;
  .num {
    font-size: 22px;
    color: #000;
  }
}
.count {
  margin: 0 10px;
}
.price {
  width: 35%;
  text-align: center;
}
.van-divider {
  margin: 0;
}
.bulletin-content {
  background: #fff;
  padding: 20px;
  border-bottom: 1px solid #ccc;
  .bulletin {
    font-size: 20px;
    color: #e53c12;
  }
}
.supports {
  font-size: 20px;
}
</style>